<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form
          ref="userFrom"
          :model="userFrom"
          label-width="80px"
          label-position="right"
          @submit.native.prevent
          inline
        >
          <div class="acea-row search-form" v-if="!collapse">
            <div>
              <el-form-item label="语言：" label-for="isLanguage">
                <el-select v-model="userFrom.isLanguage" placeholder="请选择用户等级" class="form_content_width">
                  <el-option value="cn" label="国内">中文</el-option>
                  <el-option value="com" label="国外">英文</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称：" label-for="productsName">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.productsName"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="产品型号：" label-for="productModel">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.productModel"
                  class="form_content_width"
                />
              </el-form-item>

              <el-form-item label="商品编号:" label-for="productNo">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.productNo" class="form_content_width" />
              </el-form-item>
            </div>
            <el-form-item class="search-form-sub">
              <el-button type="primary" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
          <div v-if="collapse" class="acea-row search-form">
            <div class="search-form-box">
              <el-form-item label="语言：" label-for="isLanguage">
                <el-select v-model="userFrom.isLanguage" placeholder="" class="form_content_width">
                  <el-option value="cn" label="国内">中文</el-option>
                  <el-option value="com" label="国外">英文</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称：" label-for="productsName">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.productsName"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="产品型号：" label-for="productModel">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.productModel"
                  class="form_content_width"
                />
              </el-form-item>

              <el-form-item label="商品编号:" label-for="productNo">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.productNo" class="form_content_width" />
              </el-form-item>
              <el-form-item label="上下架:" label-for="stateType">
                <el-select v-model="userFrom.stateType" placeholder="请选择" class="form_content_width">
                  <el-option value="upType" label="上架">上架</el-option>
                  <el-option value="downType" label="下架">下架</el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="登录手机:" label-for="userPhone">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userPhone" class="form_content_width" />
              </el-form-item>
              <el-form-item label="用户昵称:" label-for="userName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userName" class="form_content_width" />
              </el-form-item>

              <el-form-item label="商家信息:" label-for="shopInfo">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.shopInfo" class="form_content_width" />
              </el-form-item>
              <el-form-item label="商品ID:" label-for="pId">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.pId" class="form_content_width" />
              </el-form-item>
              <el-form-item label="商家名称:" label-for="shopName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.shopName" class="form_content_width" />
              </el-form-item>
              <el-form-item label="产品参数:" label-for="productParam">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.productParam"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="纺织设备:" label-for="categoryId">
                <el-cascader
                  :props="props"
                  v-model="userFrom.categoryId"
                  @change="handleChange"
                  placeholder="请选择"
                  :options="options1"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="所在地:" label-for="cityId">
                <el-cascader
                  :props="props1"
                  v-model="userFrom.cityId"
                  @change="handleAddress"
                  placeholder="请选择"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商家类型:" label-for="authType">
                <el-select :popper-append-to-body="false" v-model="userFrom.authType" placeholder="请选择">
                  <el-option
                    filterable
                    v-for="item in options7"
                    :key="item.code"
                    :value="item.code"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="品牌:" label-for="brandId">
                <el-select :popper-append-to-body="false" v-model="userFrom.brandId" placeholder="请选择">
                  <el-option
                    filterable
                    v-for="item in options"
                    :key="item.value"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备货周期:" label-for="deliveryCycle">
                <el-select :popper-append-to-body="false" v-model="userFrom.deliveryCycle" placeholder="请选择">
                  <el-option
                    filterable
                    v-for="item in options8"
                    :key="item.code"
                    :value="item.code"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="广告栏:" label-for="deliveryCycle">
                <el-select v-model="userFrom.searchHotStatus" :popper-append-to-body="false" placeholder="请选择">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="纺织用品:" label-for="fzId">
                <el-cascader
                  :props="props"
                  v-model="fzId"
                  @change="handleChange"
                  placeholder="请选择"
                  :options="options2"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="创建时间:" label-for="date_time">
                <el-date-picker
                  v-model="userFrom.dateTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>

            <el-form-item class="search-form-sub">
              <el-button type="primary" label="default" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-tabs v-model="userFrom.user_type" @tab-click="onClickTab">
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
      </el-tabs>
      <el-tabs v-model="userFrom.user_type1" @tab-click="onClickTab">
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum1" :key="index" />
      </el-tabs>
      <el-tabs v-model="userFrom.user_type2" @tab-click="onClickTab">
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum2" :key="index" />
      </el-tabs>
      <el-table
        :data="userLists"
        class="mt16"
        ref="table"
        highlight-current-row
        v-loading="loading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        @sort-change="sortChanged"
        @select="handleSelectRow"
        @select-all="handleSelectAll"
      >
        <el-table-column label="ID" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column type="expand" fixed>
          <template slot-scope="scope">
            <div class="expand-table">
              <div>
                <div>{{ userFrom.isLanguage == 1 ? '产品名称:' : 'Equipment Name:' }}{{ scope.row.title }}</div>
                <div>{{ userFrom.isLanguage == 1 ? '产品型号:' : 'Equipment Model:' }}{{ scope.row.model }}</div>
                <div>
                  {{ userFrom.isLanguage == 1 ? '品牌:' : 'Brand:'
                  }}{{ scope.row.brand_name ? scope.row.brand_name : 'other' }}
                </div>
                <div>{{ userFrom.isLanguage == 1 ? '产品详情:' : 'Equipment details:' }}{{ scope.row.content }}</div>
                <div>
                  {{ userFrom.isLanguage == 1 ? '产品参数:' : 'Equipment parameters:' }}

                  <div v-for="item in scope.row.product_attr" :key="item.product_attr_id">
                    {{ item.product_attr_name }}:{{ item.product_attr_val }}
                  </div>
                </div>
              </div>

              <div>
                <div>{{ userFrom.isLanguage == 2 ? '产品名称:' : 'Equipment Name:' }}{{ scope.row.title }}</div>
                <div>{{ userFrom.isLanguage == 2 ? '产品型号:' : 'Equipment Model:' }}{{ scope.row.model }}</div>
                <div>
                  {{ userFrom.isLanguage == 2 ? '品牌:' : 'Brand:'
                  }}{{ scope.row.brand_name ? scope.row.brand_name : 'other' }}
                </div>
                <div>{{ userFrom.isLanguage == 2 ? '产品详情:' : 'Equipment details:' }}{{ scope.row.content }}</div>
                <div>
                  {{ userFrom.isLanguage == 2 ? '产品参数:' : 'Equipment parameters:' }}

                  <div v-for="item in scope.row.product_attr" :key="item.product_attr_id">
                    {{ item.product_attr_name }}:{{ item.product_attr_val }}
                  </div>
                </div>
              </div>

              <div>
                <el-button type="warning" @click="choselist(scope.row)">{{
                  isLanguage == '1' ? '前往英文' : '前往中文'
                }}</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="180">
          <template slot-scope="scope">
            <div class="product-info">
              <div class="img-box" v-viewer>
                <img v-lazy="imgOssUrl + scope.row.cover_image" />
              </div>
              <div class="info-box">
                <div class="textal">{{ scope.row.title }}</div>
                <div class="textal">型号:{{ scope.row.model }}</div>
                <div class="textal">商品编号:{{ scope.row.union_id }}</div>
                <div class="textal">数据类型:</div>
                <div class="fl-item">
                  <div class="fl-label">分类:</div>
                  <div>
                    <div class="f14 textal" v-for="(el, index) in scope.row.product_category_names" :key="index">
                      {{ el.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="shop_name" label="商家名称" width="190">
          <template slot-scope="scope">
            <div class="flex jcl aic" @click="goto(scope.row)">
              <div class="w200" v-if="scope.row.shop_type == 0">
                <div class="textal"><i>用户昵称:</i> {{ scope.row.nick }}</div>
                <div class="textal">
                  <i>{{ scope.row.auth_type == 2 ? '企业名称' : '真实姓名' }}:</i>
                  {{ scope.row.shop_name }}
                </div>
                <div class="textal">
                  <i>{{ scope.row.auth_type == 2 ? '登录手机' : '登录手机' }}:</i>
                  {{ scope.row.phone }}
                </div>
              </div>
              <div class="w200" v-else>
                <div v-if="userFrom.originSite == 'cn'">平台自营</div>
                <div v-if="userFrom.originSite == 'com'">海外自营</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价钱" min-width="80">
          <template slot-scope="scope">
            <div>
              <div>
                市场指导价(元)：<i>{{ scope.row.currency }}{{ scope.row.market_price }}</i>
              </div>
              <div>
                代理协议价(元)：<i>{{ scope.row.currency }}{{ scope.row.guiding_price }}</i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.audit_status == 0">待审核</div>
              <div v-if="scope.row.audit_status == 1">审核通过</div>
              <div v-if="scope.row.audit_status == 2">审核不通过</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上下架" min-width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.origin_site == 'cn'">
              <div class="flex_line">
                {{ isLanguage == 2 ? '国外状态：' : '国内状态：' }}
                <el-switch
                  v-model="scope.row.publish_status"
                  :active-value="2"
                  @change="bianji1(scope.row.id, 'publish_status', scope.row.publish_status)"
                  :inactive-value="1"
                ></el-switch>
              </div>
              <div class="flex_line">
                {{ isLanguage == 2 ? '国内状态： ' : '国外状态：' }}
                {{ scope.row.outside_publish_status == 1 ? '下架' : '上架' }}
              </div>
            </div>
            <div v-else>
              <div class="flex_line">
                {{ isLanguage == 2 ? '国外状态：' : '国内状态：' }}
                <el-switch
                  v-model="scope.row.publish_status"
                  :active-value="2"
                  @change="bianji1(scope.row.id, 'publish_status', scope.row.publish_status)"
                  :inactive-value="1"
                ></el-switch>
              </div>
              <div class="flex_line">
                {{ isLanguage == 2 ? '国内状态： ' : '国外状态：' }}
                {{ scope.row.outside_publish_status == 1 ? '下架' : '上架' }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="推荐" min-width="60">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.is_recommend"
                :active-value="1"
                @change="bianji1(scope.row.id, 'is_recommend', scope.row.is_recommend)"
                :inactive-value="0"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="热门" min-width="60">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.is_hot"
                :active-value="1"
                @change="bianji1(scope.row.id, 'is_recommend', scope.row.is_recommend)"
                :inactive-value="0"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性价比" min-width="60">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.is_cost"
                :active-value="1"
                @change="bianji1(scope.row.id, 'is_recommend', scope.row.is_recommend)"
                :inactive-value="0"
              ></el-switch>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="运营权重分" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.user_weight }}</span>
          </template>
        </el-table-column>

        <el-table-column label="平台权重分" min-width="180">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              v-model="scope.row.custom_weight"
              @change="bianji1(scope.row.id, 'custom_weight', scope.row.custom_weight)"
              :max="9999"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column width="80" label="排名总分">
          <template slot-scope="scope">
            {{ scope.row.weight }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <template>
              <a @click="userDetail(scope.row)">详情</a>

              <el-divider direction="vertical"></el-divider>
              <a @click="userDetail(scope.row)">操作</a>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="userFrom.page"
          :limit.sync="userFrom.limit"
          @pagination="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  getShopAuth,
  getProvinceFn,
  getProductCategory,
  getBrand,
  getCountry,
  getProductList,
  getAllProductList,
} from '@/api/all';
export default {
  name: '',
  components: {},
  data() {
    let that = this;
    return {
      userFrom: {
        originSite: 'cn',
        isLanguage: 1,
        productsName: '',
        productModel: '',
        productNo: '',
        userPhone: '',
        userName: '',
        pId: '',
        shopName: '',
        categoryId: '',
        page: 1,
        limit: 10,
        user_type: '',
        dateTime: '',
        cityId: '',
        authType: '',
        brandId: '',
        deliveryCycle: '',
        fzId: '',
        countryCode: '',
        shopInfo: '',
        stateType: '',
        searchHotStatus: '',
        productParam: '',
        user_type1: '',
        user_type2: '',
        num: 1,
      },

      props: {
        value: 'zh_id',
        label: 'zh_name',
        children: 'children',
      },

      options1: [],
      options7: [
        { code: '0', name: '全部' },
        { code: '1', name: '个人' },
        { code: '2', name: '企业' },
        { code: '4', name: '国内自营' },
        { code: '8', name: '海外自营' },
      ],
      collapse: false,
      selectLabelShow: false,
      selectDataLabel: [],
      address: '',
      headeNum: [
        { type: '', name: '全部' },
        { type: 'routine', name: '新机' },
        { type: 'routine', name: '旧机' },
        { type: 'routine', name: '配件' },
        { type: 'routine', name: '纺织用品' },
      ],
      headeNum1: [
        { type: '', name: '全部' },
        { type: 'routine', name: '待审核' },
        { type: 'routine', name: '审核通过' },
        { type: 'routine', name: '审核未过' },
      ],
      headeNum2: [
        { type: '', name: '国内原始数据' },
        { type: 'routine', name: '国内确认翻译数据' },
        { type: 'routine', name: '国内未确认翻译数据' },
      ],
      userLists: [],
      total: 0,
      props1: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node; // node 节点数据
          const nodes = []; // 动态节点
          let type = level == 0 ? '0' : node.value; // 0 代表第一次请求
          that
            .provinceFn(type)
            .then((res) => {
              // console.log(res);
              res.list.map((item) => {
                let area = {
                  value: item.id,
                  label: item.name,
                  leaf: node.level >= 1,
                };
                nodes.push(area);
              });
              resolve(nodes); // 回调
            })
            .catch((error) => {
              console.log(error);
            });
        },
      },
      options: [],
      options8: [
        { code: '-1', name: '全部' },
        { code: '0', name: '现货' },
        { code: '1', name: '备货' },
      ],
      options2: [],
      options6: [],
      options3: [
        {
          value: '1',
          label: '推荐',
        },
        {
          value: '2',
          label: '热门',
        },
        {
          value: '4',
          label: '热门企业',
        },
        {
          value: '8',
          label: '性价比',
        },
      ],
    };
  },
  watch: {},
  computed: {},
  async created() {
    const res = await getAllProductList({
      page: 1,
      size: 10,
      search_lang: 'zh',
      search_publish_status: 0,
      search_audit_status: -1,
      type: -1,
      search_new_rate: -1,
    });

    this.total = res.data.total;

    this.userLists = res.data.data;
  },
  mounted() {
    getProductCategory({
      page: 1,
      size: 10,
      tag: 1,
    }).then((res) => {
      this.options1 = res.data.list[0].children;
    });
    getProductCategory({
      page: 1,
      size: 10,
      tag: 2,
    }).then((res) => {
      this.options2 = res.data.list[0].children;
    });

    getBrand().then((res) => {
      this.options = res.data.data;
    });

    getCountry().then((res) => {
      this.options6 = res.data;
    });
  },
  methods: {
    handleChange(value) {
      // console.log(value);
    },
    openSelectLabel() {
      this.selectLabelShow = true;
    },

    async provinceFn(pid) {
      const res = await getProvinceFn({ pid: pid });
      return res.data;
    },

    //地址选择
    handleChange(label) {
      this.address = label;
      console.log(this.address);
    },

    userSearchs() {
      console.log(this.userFrom);
    },
    reset() {
      this.userFrom = {
        userName: '',
        userEmail: '',
        userPhone: '',
        dateTime: '',
        nickName: '',
      };
    },
    pageChange() {},
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
::v-deep .el-input-number {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: center;

  .el-input-number__increase,
  .el-input-number__decrease {

    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 24px;
    height: 100%;
    line-height: 18px;
    background-color: #f5f7fa !important;
    z-index: 1;
    border-left: 1px solid #dcdfe6;
    text-align: center;
    font-size: 12px;
    color: #606266;
    cursor: pointer;
  }

  .el-input-number__increase {

    right: 0;
    top: 0;
  }

  .el-input-number__decrease {
   
    right: 0;
    bottom: 0;
    top: auto;
  }

  .el-input__inner {
    padding-right: 28px !important; // 给按钮留出空间
    padding-left: 8px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    color: #000 !important;
    background-color: #fff !important;
    font-size: 12px !important;
    box-sizing: border-box;
    z-index: 0;
    position: relative;
  }
}
.flex_line {
  display: flex;
  align-items: center;
}
.expand-table {
  display: flex;

  & > div {
    flex: 1;
    flex-shrink: 0;
  }
}

.el-card,
.el-message {
  overflow: visible !important;
}

.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 24px;
    font-weight: 500;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  ::v-deep .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: var(--prev-color-primary);
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox2_img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
.tabBox_img-box {
  display: flex;
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  ::v-deep .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  ::v-deep .ivu-divider-horizontal {
    margin: 0 !important;
  }
}

.labelInput {
  width: 250px;
  border: 1px solid #dcdee2;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;
  .span {
    color: #c5c8ce;
  }

  .ivu-icon-ios-arrow-down {
    font-size: 14px;
    color: #808695;
  }
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.search-form {
  display: flex;
  justify-content: space-between;
  .search-form-box {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
}
.product-info {
  display: flex;
  .img-box {
    padding-right: 10px;
    flex-shrink: 0;

    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }

  .info-box {
    flex: 1;
    .fl-item {
      display: flex;

      .fl-label {
        flex-shrink: 0;
      }
    }
  }
}
</style>

